﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>全选练习</title>
    <script type="text/javascript">
      window.onload = function () {
        /*
          全选按钮
            - 点击按钮以后,四个多选框全都被选中
        */

        //1.#checkedAllBtn
        //为id为checkedAllBtn的按钮绑定一个单击响应函数
        var checkedAllBtn = document.getElementById('checkedAllBtn');
        checkedAllBtn.onclick = function () {
          //获取四个多选框items
          var items = document.getElementsByName('items');

          //遍历items
          for (var i = 0; i < items.length; i++) {
            //设置四个多选框变成选中状态
            //通过多选框的checked属性可以来获取或设置多选框的选中状态
            //alert(items[i].checked);  //选中为true, 未选中为false
            items[i].checked = true;
          }
        };

        /*
          全不选按钮
            - 点击按钮以后,四个多选框全都被选中
        */
        //2.#checkedNoBtn
        var checkedNoBtn = document.getElementById('checkedNoBtn');
        checkedNoBtn.onclick = function () {
          var items = document.getElementsByName('items');

          //遍历items
          for (var i = 0; i < items.length; i++) {
            items[i].checked = false;
          }
        };

        /* 
          反选
            - 点击按钮以后,选中的变成没选中,没选中的变成选中
        */
        //3.#checkedRevBtn
        var checkedRevBtn = document.getElementById('checkedRevBtn');
        checkedRevBtn.onclick = function () {
          var items = document.getElementsByName('items');

          //遍历items
          for (var i = 0; i < items.length; i++) {
            //取反,如果是false,就给自己赋值true,如果是true,就给自己赋值false
            items[i].checked = !items[i].checked;
          }
        };

        /* 
          提交按钮:
            - 点击按钮以后,将所有选中的多选框的value属性值弹出
        */
        //4.#sendBtn
        var sendBtn = document.getElementById('sendBtn');
        sendBtn.onclick = function () {
          var items = document.getElementsByName('items');

          //遍历items
          for (var i = 0; i < items.length; i++) {
            if (items[i].checked) {
              alert(items[i].value);
            }
          }
        };

        //5.#checkedAllBox
        /* 
          全选/全不选 多选框
            - 当它选中时,其余的也选中,当它取消时其余的也取消
          
          在事件的响应函数中,响应函数是给谁绑定的
        */
        //为checkedAllBox绑定单击响应函数
        var checkedAllBox = document.getElementById('checkedAllBox');
        checkedAllBox.onclick = function () {
          var items = document.getElementsByName('items');

          //设置多选框的选中状态
          for (var i = 0; i < items.length; i++) {
            items[i].checked = this.checked;
          }
        };

        //6.items
        /* 
          如果四个多选框全都选中,则checkedAllBox也应该选中
          如果四个多选框没都选中,则checkedAllBox也不应该选中
        */
        var items = document.getElementsByName('items');
        //获取全选/全部选的多选框
        var checkedAllBox = document.getElementById('checkedAllBox');

        //为四个多选框分别绑定单击响应函数
        for (var i = 0; i < items.length; i++) {
          items[i].onclick = function () {
            //将checkedAllBox设置为选中状态
            checkedAllBox.checked = true;

            for (var j = 0; j < items.length; j++) {
              //判断四个多选框是否全选
              //只要有一个没选中则就不是全选
              if (!items[j].checked) {
                //一旦进入判断,则证明不是全选状态
                //将checkedAllBox设置为没选中状态
                checkedAllBox.checked = false;

                //一旦进入判断,则已经得出结果,不用再继续执行循环
                break;
              }
            }
          };
        }
      };
    </script>
  </head>
  <body>
    <form method="post" action="">
      你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

      <br />
      <input type="checkbox" name="items" value="足球" />足球
      <input type="checkbox" name="items" value="篮球" />篮球
      <input type="checkbox" name="items" value="羽毛球" />羽毛球
      <input type="checkbox" name="items" value="乒乓球" />乒乓球
      <br />
      <input type="button" id="checkedAllBtn" value="全　选" />
      <input type="button" id="checkedNoBtn" value="全不选" />
      <input type="button" id="checkedRevBtn" value="反　选" />
      <input type="button" id="sendBtn" value="提　交" />
    </form>
  </body>
</html>
